<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../dist/mermaid.css"/>
    <script src="../dist/mermaid.js"></script>
    <script>
        var mermaid_config = {
            startOnLoad:true,
            htmlLabels:false
        }
    </script>
    <script>
        function apa(){
            console.log('CLICKED');
        }
    </script>
    <style>
        .node-square > rect {
            stroke-width: 4px; 
            stroke: #339933; 
            fill: #999900;   
            font-weight: 300;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
            font-size: 14px; } 
        .node-circle > rect{ stroke-width: 0.5px; stroke: #339999; fill: #009900; }
        .node-odd-override > polygon{ stroke-width: 3.5px; stroke: #339900; fill: #009999; }
        .node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
        
    </style>
</head>
    <body>
    <h1>Style</h1>
    Styling is applied in the following order: 
    <ol>
    <li>Node default style (see wiki)</li>
    <li>CSS on the page</li>
    <li>Class definitions inside the graph definition</li>
    <li>Inline styling inside the graph definition</li>
    </ol>
    and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".

    <h3>CSS in the page head:</h3>
    <pre>
        &lt;style&gt;
            .node-square { 
                stroke-width: 4px; 
                stroke: #339933; 
                fill: #999900;   
                font-weight: 300;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
                font-size: 14px; } 
            .node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
            .node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
            .node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
            
        &lt;/style&gt;
    </pre>
    <h3>Graph definition</h3>
    <pre>
    graph TD;

        noc[No class&lt;br />using default];
        cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
        class cyr2 node-cyr-undefined;
        ndef[Default style];
        noc-->ndef;
        cyr2-->ndef;

        sq[Class node-square&lt;br /&gt;defined in page CSS];
        class sq node-square;
        ncss[Page CSS style];
        sq--&gt;ncss;

        cyr[Class node-cyr&lt;br /&gt;defined by classDef];
        od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
        ncdef[classDef style];
        od2-->ncdef;
        cyr-->ncdef;
        class cyr node-cyr;
        class od2 node-odd-override;
        classDef node-odd-override fill:#BB00BB,stroke:#666622;
        classDef node-cyr fill:#BB0099,stroke:#666622;

        e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
        class e1 node-e1;
        style e1 fill:#FF0000;
        e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
        class e2 node-e2;
        style e2 fill:#FF0000;
        e((Inline style in&lt;br /&gt;graph definition));
        style e fill:#FF0000;
        ninl[Inline style];
        e-->ninl;
        e1-->ninl;
        e2-->ninl;
        classDef node-e1 fill:#990066,stroke:#666622
        classDef node-e2 fill:#990066,stroke:#666622
    </pre>

    <div class="mermaid">
        graph TD;

        noc[No class<br />using default];
        cyr2((Class node-cyr-undefined<br />is undefined, using default));
        class cyr2 node-cyr-undefined;
        ndef[Default style];
        noc-->ndef;
        cyr2-->ndef;

        sq[Class node-square<br />defined in page CSS];
        class sq node-square;
        ncss[Page CSS style];
        sq-->ncss;

        cyr[Class node-cyr<br />defined by classDef];
        od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
        ncdef[classDef style];
        od2-->|Simple edge label|ncdef;
        cyr-->|Complex<br>multiline<br>edge label|ncdef;
        class cyr node-cyr;
        class od2 node-odd-override;
        classDef node-odd-override fill:#BB00BB,stroke:#666622
        classDef node-cyr fill:#BB0099,stroke:#666622

        e1[Class node-cyr<br />defined by classDef<br />and inline style];
        class e1 node-e1;
        style e1 fill:#FF0000
        e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
        class e2 node-e2;
        style e2 fill:#FF0000
        e((Inline style in<br />graph definition));
        style e fill:#FF0000
        ninl[Inline style];
        e-->ninl;
        e1-->ninl;
        e2-->ninl;
        classDef node-e1 fill:#990066,stroke:#666622
        classDef node-e2 fill:#990066,stroke:#666622
    </div>



    </body>
</html>
